<template>
    <div id="login">
        <h1 style="position: absolute;color: #fff;left: 50%;transform: translateX(-50%); top: -110px;">危废处置企业内部管理系统</h1>
        <el-form
                :model="userLoginForm"
                :rules="loginRules"
                status-icon
                ref="userLoginFormRef"
                label-position="left"
                label-width="0px"
                class="demo-ruleForm login-page"
        >
            <h3 class="title">系统登录</h3>
            <el-form-item prop="userName">
                <el-input
                        type="text"
                        @keyup.enter.native="handleSubmit"
                        v-model="userLoginForm.userName"
                        auto-complete="off"
                        placeholder="用户名"
                        prefix-icon="iconfont el-icon-user"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        @keyup.enter.native="handleSubmit"
                        type="password"
                        v-model="userLoginForm.password"
                        auto-complete="off"
                        placeholder="密码"
                        prefix-icon="el-icon-suitcase-1"
                ></el-input>
            </el-form-item>
            <div></div>

            <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <div style="float:right;">
                    <el-button
                            type="primary"
                            class="el-icon-mobile-phone"
                            @click="handleSubmit"
                            :loading="loading"
                    >登录
                    </el-button>
                    <el-button class="el-icon-refresh" @click="resetForm">重置</el-button>
                </div>
            </el-form-item>
        </el-form>

        <Vcode :show="isShow"
               @success="onSuccess"
               @close="close"
               :canvasWidth="500"
               :canvasHeight="350"
        />
    </div>

</template>

<script>
    import Vcode from "vue-puzzle-vcode";
    import {toLogin} from "../../../utils/apis";
    import session from "../../../utils/sessionUtils";

    export default {
        data() {
            return {
                userLoginForm: {
                    userName: "test",
                    password: "12345678"
                },
                isShow: false, // 验证码模态框是否出现
                loginRules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"},
                        {min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入用户密码", trigger: "blur"},
                        {min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur"}
                    ]
                },
                loading: false,
                checked: true
            }
        },
        components: {
            Vcode
        },
        methods: {// 用户通过了验证
            onSuccess() {
                this.isShow = false; // 通过验证后，需要手动隐藏模态框
                this.loading = true;
                toLogin({...this.userLoginForm}).then(res => {
                    console.log(res)
                    if (res.status === 10000) {
                        this.$store.commit("setUserInfo", res.data);
                        this.$router.push("/admin/index")
                        this.$message({
                            title: "登入成功",
                            message: "欢迎你进入系统",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            title: "登入失败",
                            message: res.msg,
                            type: "error"
                        });
                    }
                })
                this.loading = false;
            },
            close() {
                this.isShow = false;
            },
            handleSubmit() {
                this.isShow = true;
            },
            resetForm: function () {
                this.$refs.userLoginFormRef.resetFields();
            },

        }
    }
</script>

<style scoped>
    .login-container {
        width: 100%;
        height: 100%;

    }

    #login {
        position: relative;
    }


    .login-page {
        position: relative;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 190px auto;
        width: 370px;
        padding: 40px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
    }

    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
</style>
